<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>滑动门</title>
		<style type="text/css">
			#box{
				height: 477px;
				width: 950px;
				position: relative;
				margin: 0 auto;
				overflow: hidden;
			}
			#box img{
				position: absolute;
				left: 0;
				cursor: pointer;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<img src="/images/door1.png"/>
			<img src="/images/door2.png"/>
			<img src="/images/door3.png"/>
			<img src="/images/door4.png"/>
		</div>
		<script type="text/javascript">
			var oImgs = document.querySelectorAll("#box img");
//			alert(oImgs);
			var len = oImgs.length;
//			alert(l);
			var imgWidth = 475;
            var translate = 475/3*2;		
			function setImgPose(){
				oImgs[0].style.left=0;
				for (var i=1;i<len;i++) {
					oImgs[i].style.left =imgWidth+(i-1)*imgWidth/3+"px";
				}
			}
			setImgPose();
            for(var i = 0;i < len;i++){
                (function(i){
                    var t =i;
                    oImgs[i].onmouseover = function(){
                        setImgPose();
                        for(var j = 1; j<=t ;j++){
                            oImgs[j].style.left = parseInt(oImgs[j].style.left)-translate +"px";
                        }  
                    };
            })(i);
        }
		</script>
	</body>
</html>

